<template>
    <div class="header">
        <div class="logo">ERP综合平台</div>
        <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    <img class="user-logo" src="../../../static/img/img.jpg">
                    {{username}}
                </span>
                <el-dropdown-menu slot="dropdown">
                	<!--<el-dropdown-item command="我的信息">我的信息</el-dropdown-item>-->
                	<el-dropdown-item command="changerPwd">修改密码</el-dropdown-item>
                    <el-dropdown-item command="loginout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        
		<el-dialog title="修改密码" :visible.sync="dialogFormVisible">
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="新密码" prop="password">
					<el-input type="password" v-model="ruleForm.password" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkPass">
					<el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="updatePassword">提交</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
    </div>
</template>
<script>
	
	import { Cookie } from '../../js/common';
	import { query, apiparas, execute } from '../../api/api';
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入密码'));
				} else {
					if(this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请再次输入密码'));
				} else if(value !== this.ruleForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				name:'未登录',
	            formLabelWidth: '120px',
				dialogFormVisible: false,
		
				ruleForm: {
					password: '',
					checkPass: ''
				},
				rules: {
					password: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}]
				}
			}
		},
		computed: {
			username() {
				let username = Cookie.Get('user_name'); //localStorage.getItem('ms_username');
	            return username ? username : this.name;
	        }
	    },
	    methods:{
	    	resetForm(formName) {
        		this.$refs[formName].resetFields();
      		},
	        handleCommand(command) {
	            if(command == 'loginout'){
	               	Cookie.Set('user_key','');
	               	Cookie.Set('user_name','');
	               	Cookie.Set('company_key','');
	               	Cookie.Set('company_name','');
	                Cookie.Set('token','');
	                //localStorage.removeItem('ms_username')
	                this.$router.push('/login');
	            }else if(command=== 'changerPwd'){
	                this.dialogFormVisible = true;
	            }  
            },
            updatePassword:function(){
				let jsonparas = [
					{'name': 'psw','value':this.ruleForm.password}
				];
				//查询汇总
				let _paras = apiparas.getParas('default','sys|updatepassword', jsonparas);
				execute(_paras).then(response => {
					if(response.errid == 0){
						this.addFormVisible = false;
						this.$notify({title:'成功信息',message:'修改完成，请重新登陆',type:'success'});
						this.$router.push('/login');
					}
					else
					{
						this.$notify.error({title: '错误',message:response.errmsg ,type:'error'});
					}
				});				
            }
        }
    }
</script>
<style scoped>
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: 22px;
        line-height: 70px;
        color: #fff;
    }
    .header .logo{
        float: left;
        width:250px;
        text-align: center;
    }
    .user-info {
        float: right;
        padding-right: 50px;
        font-size: 16px;
        color: #fff;
        z-index: 1001;
    }
    .user-info .el-dropdown-link{
        position: relative;
        display: inline-block;
        padding-left: 50px;
        color: #fff;
        cursor: pointer;
        vertical-align: middle;
         z-index: 1001;
    }
    .user-info .user-logo{
        position: absolute;
        left:0;
        top:15px;
        width:40px;
        height:40px;
        border-radius: 50%;
         z-index: 1001;
    }
    .el-dropdown-menu__item{
        text-align: center;
    }
</style>
